import React, { useEffect, useState, useRef } from "react"
import { View, Text, Image, Swiper, SwiperItem, Video, Navigator } from "@tarojs/components"
import { navigateTo, createVideoContext, pageScrollTo, useDidShow, useDidHide, login } from "@tarojs/taro"
import "@@/pages/index/index.scss"
declare global {
    let Mudu: any
    interface window {
        Mudu: any
    }
}
let Mudu
const TitleAndLine = (props: { title: string }) => {
    return (
        <View className="titleBox">
            <View className="title">{props.title}</View>
            {/* <View className="line"></View> */}
        </View>
    )
}


const IndexPage = () => {
    const [videoSrc, setVideoSrc] = useState("")
    const [weappVideoInit, setWeappVideoInit] = useState<boolean>(false)
    useEffect(() => {
        MuduInit()
    }, [])
    const MuduInit = () => {
        if (TARO_ENV === "weapp") {
            Mudu = require("../../utils/wechat-mudu.min")
            //获取小程序code
            login({
                success: res => {
                    console.log(res.code)
                }
            })
            //设置小程序code获取session_key地址
            // Mudu.setOption('login_server_url', 'http://xxxxx.com/path/')

            // 用户组件不会再获取用户的openId或unionId，请在sdk初始化成功后通过Mudu.Room.User.Assign（异步）方法更新用户信息
            // const userInfo = Mudu.storage.getUser();

            // //更新用户信息
            // Mudu.Room.User.Assign({
            // }, () => {
            // });
            Mudu.setOption("register_modal", ["Comments", "Vote", "PPT"])
            Mudu.Init(
                // 频道id
                528778,
                // 初始化完成的回调函数，无参数
                function () {
                    console.log("Mudu Weapp Sdk 初始化成功")
                    //获取直播地址
                    setVideoSrc(Mudu.Room.GetPlayAddr())
                    console.log(Mudu.Room.GetPlayAddr())
                    setWeappVideoInit(true)
                }
            )

            // Room.Init.Over事件会在sdk初始化完成后被触发
            Mudu.MsgBus.On("Room.Init.Over", function () {
                console.log("Room.Init.Over初始化完成")
            })

            // 事件处理函数，初始化错误对象
            Mudu.MsgBus.On("Room.Init.Error", function (err) {
                throw err
            })
        }

        if (TARO_ENV === "h5") {
            Mudu = window.Mudu
            Mudu.Init(
                // 频道id
                528778,

                // 初始化完成的回调函数，无参数
                function () {
                    console.log("Mudu Web Sdk 初始化成功")
                    console.log(Mudu.Room.GetPlayAddr("h5"))
                    // console.log(roomName)
                    // console.log(roomLiveStatus)
                    // console.log(roomPlayAddr)
                    // console.log(trailer)
                    // setIframeSrc(roomPlayAddr)
                    var isChannelLiving = !!Mudu.Room.GetLiveStatus() // Mudu.Room.GetLiveStatus() 获取当前的直播状态 类型为number: `1`为正在直播，`0`为不在直播
                    console.log(isChannelLiving, "直播状态")
                    setWeappVideoInit(true)
                    // setVideoSrc(Mudu.Room.GetPlayAddr())

                    new Mudu.Player({
                        // 必须，播放器容器ID，播放器会被添加到该DOM元素中
                        containerId: "VideoBox",

                        // 非必需 boolean 控制播放器的ui展示, 默认为false; 根据播放视频的实际情况填写
                        isLive: isChannelLiving,

                        // 必须，播放器视频播放地址
                        //Mudu.Room.GetPlayAddr()直播地址
                        //Mudu.Room.GetTrailer().m3u8 回看地址
                        src: isChannelLiving ? Mudu.Room.GetPlayAddr() : Mudu.Room.GetTrailer().m3u8,

                        // 非必须，播放器海报图 string
                        image: Mudu.Room.GetLiveImage(),

                        // 已废弃该参数，请勿使用
                        type: "live",

                        // 非必须，播放器是否自动播放，默认false
                        autoplay: false,

                        // 非必须，播放器是否显示控制条，默认true
                        controls: true,

                        // 非必须，播放器是否循环播放, 默认false
                        repeat: false,

                        // 非必须，播放器宽度，单位为像素，默认为480
                        width: 335,

                        // 非必须，播放器高度，单位为像素，默认为270
                        height: 189,

                        // 以下x5Layer和x5Inline两个参数用于解决安卓微信、QQ、QQ浏览器的只能全屏播放的问题。参数仅对安装过tbs(腾讯浏览服务，一般安装过QQ浏览器后手机上会存在)手机生效(由于tbs的api限制，部分低版本的微信、QQ、QQ浏览器可能不会生效)，未安装tbs的安卓手机不会有只能全屏播放的问题。
                        // x5Layer和x5Inline只能有一个被设置为true

                        // 非必须，播放器在安卓微信、QQ、QQ浏览器中是否同层播放, 默认false  （注：同层播放时，页面document无法滚动(内部的dom元素可以)，如果播放器宽度小于浏览器宽度，两边将出现黑边）
                        x5Layer: false,

                        // 非必须，播放器在安卓微信、QQ、QQ浏览器中是否inline播放，默认false  （注：inline播放时，播放器始终处于z-index的最上层，因此无法在播放器上叠加元素）
                        x5Inline: false,

                        // 非必须 isLive为false时展示在时间进度条上的高亮点，hover时可展示text字段内容 （视频为回看视频时，会默认添加高亮信息，设置为[]可覆盖）
                        highlights: [
                            {
                                time: 1, // int,
                                text: "大会开始" // string
                            }
                        ]
                    })
                }
            )
        }
    }
    //-----------------------------------小程序直播------------------------------------
    // Page组件onHide时调用
    // useDidHide(() => {
    //     if (TARO_ENV === "weapp") {
    //         // Mudu.Room.Player.OnPageHide()
    //     }
    // })
    // //Page组件onUnload时调用
    // useEffect(() => {
    //     if (TARO_ENV === "weapp") {
    //         // Mudu.Room.Player.OnPageUnload()
    //     }
    // })
    // video组件bindplay时调用
    const weapp_mudu_onPlay = () => {
        if (TARO_ENV === "weapp") {
            console.log("小程序播放了")
            Mudu.Room.Player.OnPlay()
        }
    }

    // video组件bindpause时调用
    const weapp_mudu_onPause = () => {
        if (TARO_ENV === "weapp") {
            console.log("小程序播放停止了")
            Mudu.Room.Player.OnPause()
        }
    }

    // video组件bindended时调用
    const weapp_mudu_onEnded = () => {
        if (TARO_ENV === "weapp") {
            console.log("小程序播放结束了")
            Mudu.Room.Player.OnEnded()
        }
    }
    return <View>
        {TARO_ENV === "weapp" && weappVideoInit && (
            <View className="partBox">
                <TitleAndLine title="活动直播" />
                <Video
                    id="mudu_video_box"
                    muted={false}
                    className="actVideo"
                    src={videoSrc}
                    onPlay={weapp_mudu_onPlay}
                    onPause={weapp_mudu_onPause}
                    onEnded={weapp_mudu_onEnded}
                ></Video>
            </View>
        )}
        {TARO_ENV === "h5" && (
            <View className="partBox">
                <TitleAndLine title="活动直播" />
                <View className="VideoBox" id="VideoBox"></View>
            </View>
        )}
    </View>
}

export default IndexPage